<template>
  <view class="pay-way-page" v-if="showPopup">
    <view class="page-content">
      <image
        class="banner-img"
        mode="widthFix"
        src="http://tianxin100we10.cyyvip.com/web/uploads/images/store_1/2021-06-26/a46d9257f8f43e9181c22e18b49e49e30c4d7b0c.png"
      />
      <view class="content-body">
        <view class="coupon-item">
          <view class="coupon-content">
            <view class="coupon-info">
              <view class="coupon-left">
                <view
                  ><text>￥</text><text>{{ couponInfo.sub_price }}</text></view
                >
                <view>{{ couponInfo.min_price_desc }}</view>
              </view>
              <view class="hold-line"></view>
              <view class="coupon-right">
                <view>{{ couponInfo.name }}</view>
                <view v-if="couponInfo.expire_type == 1"
                  >{{ couponInfo.expire_day }}{{$t('facePay.overdue')}}</view
                >
                <view v-else
                  >{{ couponInfo.begin_time | subStrTime }}-{{
                    couponInfo.end_time | subStrTime
                  }}</view
                >
              </view>
            </view>
            <view class="receive-btn" @click="receiveCoupon"> {{$t('coupon.date1')}} </view>
          </view>
          <view class="coupon-bg"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {},
      couponInfo: {},
    };
  },
  props: {
    showPopup: {
      type: Boolean,
      default: true,
    },
    coupon_id: {
      type: String,
      default: "",
    },
  },

  computed: {},
  filters: {
    subStrTime(str) {
      if (!str) return "";
      let arr = str.split(" ");
      if (arr.length > 1) {
        return arr[0];
      } else {
        return arr[0];
      }
    },
  },
  created() {
    let userInfo = uni.getStorageSync("userInfo");
    let Token = uni.getStorageSync("token");
    // 如果未登录则，跳转至登录页
    if (!Token) {
      this.$utils.toUrl("/login/login/login_page");
      return;
    }
    if (userInfo) {
      this.userInfo = userInfo;
    }
  },
  mounted() {
    if (this.coupon_id) {
      this.getCouponDetail();
    }
  },
  methods: {
    // 领取转赠优惠券
    receiveCoupon() {
      this.$allrequest.facePay
        .receiveGiveCoupon({
          coupon_id: this.coupon_id,
          user_id: this.userInfo.id,
        })
        .then((res) => {
          if (!res.code) {
            uni.showToast({
              title: res.msg,
              icon: "none",
              duration: 2000,
              mask: true,
            });
            setTimeout(() => {
              this.$utils.toUrl("/pages/home/home", "switchtab");
            }, 1500);
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
              duration: 2000,
              mask: true,
            });
          }
        });
    },
    // 获取优惠券信息
    getCouponDetail() {
      this.$allrequest.facePay
        .getCouponDetail({ coupon_id: this.coupon_id },true)
        .then((res) => {
          if (!res.code && res.data) {
            this.couponInfo = res.data.list;
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.pay-way-page {
  width: 100%;
  min-height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 111;
  background: #e4341d;
  font-family: PingFang SC;

  .page-content {
    width: 100%;
    height: 100%;

    .banner-img {
      width: 100%;
      display: block;
      position: relative;
      z-index: 10;
    }

    .content-body {
      position: relative;
      z-index: 11;
      top: -21rpx;

      .coupon-item {
        width: 702rpx;
        height: 206rpx;
        background: linear-gradient(0deg, #ffcc4e, #fd9005);
        border-radius: 24rpx;
        position: relative;
        margin: 0 auto;

        .coupon-content {
          width: 672rpx;
          height: 171rpx;
          background: linear-gradient(0deg, #ffead1, #fedfba);
          box-shadow: 0 3rpx 6rpx 0 rgba(255, 134, 7, 0.5);
          position: absolute;
          left: 15rpx;
          top: 14rpx;
          z-index: 15;
          border-radius: 20rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 24rpx 0 51rpx;

          .coupon-info {
            display: flex;
            align-items: center;
            .coupon-left {
              font-size: 22rpx;
              font-weight: 400;
              color: #831c01;
              line-height: 1;
              view:nth-child(1) {
                font-size: 56rpx;
                font-weight: 500;
                color: #831c01;
                line-height: 1;
                display: flex;
                align-items: baseline;
                margin-bottom: 11rpx;

                text:nth-child(1) {
                  font-size: 28rpx;
                  font-weight: 500;
                  color: #831c01;
                  line-height: 1;
                }
              }
            }
            .hold-line {
              width: 2rpx;
              height: 70rpx;
              background: #831c01;
              margin: 0 27rpx 0 34rpx;
            }
            .coupon-right {
              font-size: 22rpx;
              font-weight: 400;
              color: #ff4b33;
              line-height: 1;
              view:nth-child(1) {
                font-size: 32rpx;
                font-weight: 500;
                color: #ff4b33;
                margin-bottom: 24rpx;
              }
            }
          }

          .receive-btn {
            width: 120rpx;
            height: 48rpx;
            background: #ff4b33;
            border-radius: 24rpx;
            text-align: center;
            line-height: 48rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #ffffff;
          }
        }

        .coupon-bg {
          width: 682rpx;
          height: 186rpx;
          background: linear-gradient(0deg, #ffcc4e, #fd9005);
          border-radius: 24rpx;
          position: absolute;
          left: 10rpx;
          top: 10rpx;
          z-index: 13;
        }
      }
    }
  }
}
</style>
